<template>
	<view class="box">
		<view class="bar">
			<image src="../../static/img/temp.png" mode=""></image>
		</view>
		
		<view class="head">
			<view class="header"></view>
			<view class="editHead" @click="toEdit" v-if="isLogin">
				编辑资料
			</view>
		</view>
		
		<view class="headInfo">
			<view class="name">
				<text  v-if="isLogin">{{userInfo.nickname}}</text>
				<text v-else @click="toLogin">登录/注册</text>
				<!-- <view class="proof">
					<image src="../../static/img/temp.png" mode=""></image>
					<text>学生认证</text>
				</view> -->
			</view>
			<view class="sketch"  v-if="isLogin">
				<text>公益一直是我想要做的事情。</text>
			</view>
		</view>
		
		<view class="follow" v-if="isLogin">
			<view class="myf" @click="toFollowing">
				<view class="value">
					{{following.length}}
				</view>
				<view class="key">
					我的关注
				</view>
			</view>
			
			<view class="fme" @click="toFollowers" v-if="isLogin">
				<view class="value">
					{{followers.length}}
				</view>
				<view class="key">
					关注我的
				</view>
			</view>
		</view>
		
		<view class="functions" v-if="isLogin">
			<!-- <view class="tab">
				<image src="../../static/img/renzheng.png" mode=""></image>
				<text class="content">个人认证</text>
				<text class="more">></text>
			</view> -->
			
			<view class="tab" @click="toJoin">
				<image src="../../static/img/qizi.png" mode=""></image>
				<text class="content">我的社团</text>
				<text class="more">></text>
			</view>
			
			<view class="tab" @click="toPoint">
				<image src="../../static/img/jifen.png" mode=""></image>
				<text class="content">我的公益积分</text>
				<text class="more">></text>
			</view>
		</view>
		
		<view class="myDynamic" v-if="isLogin">
			<view class="operBar">
				<text class="active">动态</text>
				<text>收藏</text>
				<text>活动</text>
			</view>
			
			<view class="dynamics">
				<view class="tab" v-for="item in dynamiclist">
					<view class="shows">
						<image src="../../static/logo.png" mode=""></image>
					</view>
					
					<view class="content">
						<view class="top">
							<text>{{item}}</text>
							<!-- <text class="time">3分钟前</text> -->
						</view>
						
						<view class="bottom">
							<view class="left">
								<!-- <image class="portrait" src="../../static/img/temp.png" mode=""></image>
								<text>益加一</text>
								<image class="proof" src="../../static/img/temp.png" mode=""></image> -->
							</view>
							
							<view class="right">
								<view class="ops">
									<image src="../../static/img/chakan.png" mode=""></image>
									<text>0</text>
								</view>
								<view class="ops">
									<image src="../../static/img/liuyan.png" mode=""></image>
									<text>0</text>
								</view>
								<view class="ops">
									<image src="../../static/img/shoucang.png" mode=""></image>
									<text>0</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- <div class="have">
			我包含：
			<navigator url="./myIntegral">我的公益积分</navigator>
			<navigator url="./myIdle">我的闲置物</navigator>
			<navigator url="./setInfo">编辑资料</navigator>
			<navigator url="./myInfo">我的详细资料</navigator>
		</div> -->
		<Launch></Launch>
	</view>
</template>

<script>
	import Launch from "../launch/launch.vue"
	export default {
		components: {
			Launch
		},
		data () {
			return {
				followers: [],
				following: [],
				dynamiclist: []
			}
		},
		computed: {
			isLogin () {
				return this.$store.state.isLogin
			},
			userInfo () {
				return uni.getStorageSync("userInfo")
			}
		},
		methods: {
			toEdit () {
				uni.navigateTo({
					url: "edit"
				})
			},
			toFollowers () {
				uni.navigateTo({
					url: "followers"
				})
			},
			toFollowing () {
				uni.navigateTo({
					url: "following"
				})
			},
			toPoint () {
				uni.navigateTo({
					url: "point"
				})
			},
			toJoin () {
				uni.navigateTo({
					url: "commuin"
				})
			},
			toLogin () {
				uni.navigateTo({
					url: "login"
				})
			}
		},
		async onShow () {
		
			if (this.$store.state.userInfo.nickname) {
				let res = await uni.request({
					url: this.$config.basisIP,
					method: "POST",
					data: {
						fun: "query",
						query_type: "self_data",
						username: this.$store.state.userInfo.username,
						nickname: this.$store.state.userInfo.nickname,
						email: this.$store.state.userInfo.email
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					}
				})
				
				// ...
				
				res = await uni.request({
					url: this.$config.basisIP,
					method: "POST",
					data: {
						fun: "query",
						query_type: "attention",
						username: this.$store.state.userInfo.username,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					}
				})
				
				this.followers = res[1].data.result.o
				this.following = res[1].data.result.i
				
				res = await uni.request({
					url: this.$config.basisIP,
					method: "POST",
					data: {
						fun: "query",
						query_type: "dynamics",
						username: this.$store.state.userInfo.username,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					}
				})
				
				this.dynamiclist = res[1].data.result
			}
		}
	}
		
</script>

<style lang="scss" scoped>	
	.box {
		.bar {
			padding: 10px;
			text-align: right;
			
			image {
				width: 43rpx;
				height: 43rpx;
				margin-top: $middleMargin;
			}
		}
		
		.head {
			padding: $dPad;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.header {
				width: 145rpx;
				height: 145rpx;
				background-color: rgba(255, 236, 139, 1);
				border-radius: 50%;
			}
			
			.editHead {
				width: 154rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 50px;
				font-size: 25rpx;
				background-color: rgba(255, 218, 68, 1);
				text-align: center;
			}
		}
		
		.headInfo {
			margin-top: $middleMargin;
			padding: $dPad;
			
			.name {
				display: flex;
				
				& > text {
					font-weight: bold;
					font-size: $largeFont;
				}
				
				.proof {
					margin-left: $largeMargin;
					display: flex;
					align-items: center;
					
					image {
						width: $middleIcon;
						height: $middleIcon;
					}
					
					text {
						margin-left: $smallMargin;
						color: $subColor;
						font-size: $smallFont;
					}
				}
			}
		}
		
		.sketch {
			margin-top: $smallMargin;
			@include flexi;
			
			text {
				font-size: $smallFont;
				color: $subColor;
			}
		}
	
		.follow {
			padding: $dPad;
			margin-top: $middleMargin;
			display: flex;
			
			.myf, .fme {
				text-align: center;
				
				.value {
					color: $yellow;
					font-size: $middleFont;
				}
				
				.key {
					color: $subColor;
					font-size: $smallFont;
					font-weight: bold;
				}
			}
			
			.fme {
				margin-left: $middleMargin;
			}
		}
		
		.functions {
			margin-top: $middleMargin;
			padding: $dPad;
			
			.tab {
				margin-top: $middleMargin;
				padding: $smallMargin 0;
				display: flex;
				align-items: center;
				image {
					width: $middleIcon;
					height: $middleIcon;
				}
				
				.content {
					margin-left: $middleMargin;
					flex: 1;
					font-size: $smallFont;
				}
				
				.more {
					font-size: $largeFont;
				}
			}
		}
		
		.myDynamic {
			margin: $dPad;
			margin-top: $middleMargin;
			
			.operBar {
				height: 98rpx;
				padding: $smallPad;
				position: relative;
				background: #fff;
				line-height: 98rpx;
				border-radius: 5px;
				box-shadow: $viewShadow;
				
				text {
					margin-right: $middleIcon;
					font-size: $smallFont;
					font-weight: bold;
					color: $subColor;
				}
				
				.active {
					color: #333;
				}
				
				&::after {
					content: "";
					display: block;
					width: $middleIcon;
					height: 2px;
					position: absolute;
					bottom: 5px;
					left: 30rpx;
					background-color: $yellow;
				}
			}
			
			.dynamics {
				margin-top: $middleMargin;
				
				.tab {
					margin-bottom: $middleMargin;
					
					.shows {
						height: 393rpx;
						
						image {
							border-radius: 10px 10px 0 0;
							width: 100%;
							height: 100%;
						}
					}
					
					.content {
						background: #fff;
						padding: $smallMargin;
						border-radius: 0px 0px 10px 10px;
						box-shadow: $viewShadow;
						
						.top {
							display: flex;
							justify-content: space-between;
							align-items: baseline;
							
							text {
								font-size: $middleFont;
							}
							
							.time {
								font-size: $smallFont;
								color: $subColor;
							}
						}
						
						.bottom {
							margin-top: $smallMargin;
							display: flex;
							justify-content: space-between;
							height: 85rpx;
							
							.left {
								display: flex;
								align-items: center;
								
								.portrait {
									width: $largeIcon;
									height: $largeIcon;
								}
								
								text {
									font-size: 30rpx;
									margin: 0 $smallMargin;
								}
								
								.proof {
									width: $smallIcon;
									height: $smallIcon;
								}
							}
							
							.right {
								display: flex;
								
								.ops {
									display: flex;
									align-items: center;
									margin: 0 $smallMargin;
									
									image {
										width: $smallIcon;
										height: $smallIcon;
									}
									
									text {
										margin-left: $smallMargin;
										font-size: $smallFont;
									}
								}
								
								
							}
						}
					}
				}
			}
		}
	}
</style>
